<template>
  <uni-popup ref="popup" type="bottom" :is-mask-click="false">
    <view class="dialog-container">
      <!-- 标题 -->
      <view class="dialog-title">{{ dialogTitle }}</view>
      <uni-forms ref="formRef" :modelValue="formData" label-width="100">
        <uni-forms-item
          label="指派维修人员"
          name="repairMan"
          class="select-popup"
          required
          :rules="[{ required: true, errorMessage: '请指派维修人员' }]"
        >
          <view class="fault-type-picker" @click="repairManPopup.open()">
            <text v-if="formData.repairMan" style="margin-left: auto">
              {{
                repairManList.find((item) => item.value === formData.repairMan)
                  ?.text
              }}
            </text>
            <text v-else class="placeholder" style="margin-left: auto"
              >请选择</text
            >
            <uni-icons type="arrowright" size="24" color="#d7d7da"></uni-icons>
          </view>
          <SelectPopup
            ref="repairManPopup"
            :items="repairManList"
            :value="formData.repairMan"
            @select="selectRepairMan"
          />
        </uni-forms-item>

        <uni-forms-item
          :label="dialogTitle == '转他人处理' ? '备注' : '工单描述'"
          name="repairDesc"
          class="textarea-desc"
        >
          <textarea
            v-model="formData.repairDesc"
            placeholder="请输入"
            :maxlength="1000"
          />
        </uni-forms-item>
      </uni-forms>

      <!-- 操作按钮 -->

      <view class="btn-group">
        <button class="transfer-btn" @click="close">取消</button>
        <button class="submit-btn" @click="submit">确定</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import api from "@/api/modules/home";

const $emit = defineEmits(["submit"]);

const props = defineProps({
  dialogTitle: {
    type: String,
    default: "转他人处理",
  },
});

const popup = ref();

let formRef = ref();
// 打开弹窗
let currRow = ref();
const open = (row: any) => {
  currRow.value = row;
  popup.value.open();
  uni.hideTabBar();
};

// 关闭弹窗
const close = () => {
  popup.value.close();
  formData.value.repairMan = "";
  formData.value.repairDesc = "";
  uni.showTabBar();
};
const formData = ref({
  repairMan: "",
  repairDesc: "",
});

const submit = async () => {
  try {
    await formRef.value.validate();

    // 动态接口配置
    let apiMethod;
    let finalParams;

    if (props.dialogTitle === "转他人处理") {
      apiMethod = api.workOrderTransferWorkOrder;
      // 适配转他人接口参数结构
      finalParams = {
        tackle_user_id: formData.value.repairMan,
        description: formData.value.repairDesc,
        uuid: currRow.value.uuid,
        resave1: formData.value.repairDesc,
      };
    } else {
      const baseParams = {
        description: formData.value.repairDesc,
        tackle_user_id: formData.value.repairMan,
        operation_alarm_id: currRow.value.uuid,
      };
      apiMethod = api.workOrderAssignWorkOrder;
    }

    console.log("提交参数:", finalParams);
    const res = await apiMethod(finalParams);

    if (res.code === 0) {
      uni.showToast({
        title: props.dialogTitle === "转他人处理" ? "转办成功" : "分配成功",
        icon: "success",
      });
      close();
      $emit("submit");
    }
  } catch (error) {
    console.error("操作失败", error);
    uni.showToast({
      title: error?.response?.data?.msg || "操作失败",
      icon: "none",
    });
  }
};

const repairManPopup = ref();
const selectRepairMan = (item: { value: string; text: string }) => {
  formData.value.repairMan = item.value;
};

const imageList = ref<any[]>([]);
const videoList = ref<any[]>([]);
const repairManList = ref([
  { value: "hardware", text: "硬件故障" },
  { value: "software", text: "软件故障" },
]);

const baseapiUserListUser = async () => {
  try {
    let res = await api.baseapiUserListUser({ org_bm: "" });
    console.log("获取维修人员", res);

    // 清空原有数据
    repairManList.value = [];

    // 处理返回数据
    res.data.forEach((user: any) => {
      repairManList.value.push({
        value: user.user_id,
        text: user.user_mc,
      });
    });
  } catch (error) {
    console.error("获取维修人员失败", error);
  }
};

onMounted(async () => {
  Promise.all([baseapiUserListUser()]);
});

defineExpose({ open });
</script>

<style lang="scss" scoped>
.dialog-container {
  width: 100%;
  background: #fff;
  max-height: 80vh;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .uni-forms {
    padding: 0 30rpx;
    flex: 1;
    overflow: auto;
    .uni-forms-item {
      margin-bottom: 10rpx !important;
      &.item-bg {
        flex-wrap: wrap;
        :deep(.uni-forms-item__content) {
          width: 100%;
          flex: auto;
        }
        :deep(.upload-tips) {
          position: absolute;
          left: 75px;
          bottom: 0;
          top: -32px;
        }
      }
      .fault-type-picker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10rpx 0;
        color: #666;
        font-size: 28rpx;
      }
    }
  }
  .btn-group {
    padding: 20rpx 40rpx;
  }
}

.dialog-title {
  font-weight: 500;
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 24rpx;
  height: 85rpx;
  line-height: 85rpx !important;
  text-align: center;
  background: #5e93ff;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
}

.section {
  margin-bottom: 40rpx;

  &-title {
    font-size: 32rpx;
    color: #666;
    margin-bottom: 16rpx;
  }
}

.tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 12rpx;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 32rpx;
  margin-top: 40rpx;

  .btn {
    padding: 16rpx 48rpx;
    border-radius: 8rpx;
    font-size: 28rpx;

    &.cancel {
      background: #f5f5f5;
      color: #666;
    }

    &.confirm {
      background: #007aff;
      color: white;
    }
  }
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}
</style>
